<template>
  <el-form-item label="" prop="email">
    <el-input placeholder="手机号" v-model="loginRequest.phone" :prefix-icon="User"></el-input>
  </el-form-item>

  <el-form-item label="" prop="code">
      <el-input  v-model="loginRequest.code" :prefix-icon="Lock" placeholder="手机验证码">
        <template #append>
          <el-button @click="sendMobileCode" type="danger" :disabled="state.sendMobileCodeTimer!==null">{{ state.sendMobileCodeText }}</el-button>
        </template>
      </el-input>
  </el-form-item>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'

import {defineProps, defineEmits, reactive} from "vue";

const emit=defineEmits(["sendMobileCode"])

const props =  defineProps({
    loginRequest:{
      type:Object,
      default:{}
    }
  })

const state=reactive({
  sendMobileCodeTimer:null,
  sendMobileCodeText:"发送验证码",
  sendMobileCodeMaxInterval:60
})

const sendMobileCode=()=>{

  if(state.sendMobileCodeTimer)return

  emit('sendMobileCode')
  state.sendMobileCodeText=state.sendMobileCodeMaxInterval
  state.sendMobileCodeTimer=setInterval(()=>{
    state.sendMobileCodeText--
    if(state.sendMobileCodeText<=0){
      state.sendMobileCodeText="发送验证码"
      clearInterval(state.sendMobileCodeTimer)
      state.sendMobileCodeTimer=null
    }
  },1000)
}
</script>

<script>
export default {
  name: "MobileCodeItem"
}
</script>


<style scoped>

</style>